/*清除默认样式*/
* {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-decoration: none;
}
body {
    background-color: #f3f6f8;
}
/*左侧 侧边栏*/
aside {
    position: fixed;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: 15%;
    /*vh表示视口的高度，vw表示视口的宽度*/
    height: 100vh;
    padding: 0 24px;
    background: #30333c;
    color: #fff;
    font-family: "Microsoft YaHei UI";
}
aside h1 {
    height: 5vh;
    line-height: 5vh;
    padding:5px  0;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
}
/*隐藏侧边栏滚动条 开始*/
aside nav {
    /*height: 100vh;*/
    /*position: relative;*/
    /*overflow: hidden;*/
}
aside nav div {
    height: 40vh;
    margin-bottom: 24px;
    /*width: 100%;*/
    /*position: absolute;*/
    /*left: 0;*/
    /*top: 0;*/
    /*主要功能点*/
    /*right: -47%;*/
    /*right: -176%;*/
    /*bottom: 0;*/
    /*overflow-x: hidden;*/
    /*overflow-y: scroll;*/
}
nav div h2 {
    font-size: 14px;
    font-weight: 400;
    border-top: 2px solid #3f434f;
    padding: 9px 0;
    color: #eeeeee;
}
/*隐藏侧边栏滚动条 开始  new*/
.subLeftBar {
    position: relative;
    /*height: 100vh;*/
    /*防止滚动条的出现*/
    overflow: hidden;
}
.subLeftBar .asideNav {
    position: absolute;
    left: 0;
    top: 0;
    right: -17px;
    overflow-y: scroll;
}
/*隐藏侧边栏滚动条 结束*/
nav div .asideNav {
    /*剩下的视口高度*/
    height: 93%;
    padding-left: 15px;
    border-top: 2px solid #3f434f;
    /*border-bottom: 2px solid #3f434f;*/
    /*right: -47%;*/
    overflow-y: scroll;
}
nav div+div .asideNav {
    border-bottom: 2px solid #3f434f;
}
div .asideNav li {
    display: block;
    /*height: 30px;*/
}
div .asideNav li:hover {
    background: #3e424d;
}

/*设置侧栏字体图标 开始*/
@font-face {
    font-family: "iconfont";
    src: url('../fontImage/iconfont.eot');
    src: url('../fontImage/iconfont.eot?#iefix') format('embedded-opentype'),
    url('../fontImage/iconfont.woff2') format('woff2'),
    url('../fontImage/iconfont.woff') format('woff'),
    url('../fontImage/iconfont.ttf') format('truetype'),
    url('../fontImage/iconfont.svg') format('svg');
}
nav div h2:before,
.asideNav li a:before {
    font-family: "iconfont" !important;
    content: "\e609";
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #6b7386;
    padding-right: 12px;
}
nav div h2:before {
    font-size: 18px;
    color: #eeeeee;
    padding-right: 5px;
}
.asideNav li a:hover:before {
    font-family: "iconfont" !important;
    content: "\e609";
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #ffffff;
    padding-right: 12px;
}
.asideNav li:nth-child(12n+1) a:before {
    content: '\e623';
}
.asideNav li:nth-child(12n+2) a:before {
    content: '\e60f';
}
.asideNav li:nth-child(12n+3) a:before {
    content: '\e61f';
}
.asideNav li:nth-child(12n+4) a:before {
    content: '\e619';
}
.asideNav li:nth-child(12n+5) a:before {
    content: '\e617';
}
.asideNav li:nth-child(12n+6) a:before {
    content: '\e605';
}
.asideNav li:nth-child(12n+7) a:before {
    content: '\e603';
}
.asideNav li:nth-child(12n+8) a:before {
    content: '\e615';
}
.asideNav li:nth-child(12n+9) a:before {
    content: '\e61d';
}
.asideNav li:nth-child(12n+10) a:before {
    content: '\e627';
}
.asideNav li:nth-child(12n+11) a:before {
    content: '\e62b';
}
.asideNav li:nth-child(12n+1) a:hover:before {
    content: '\e623';
}
.asideNav li:nth-child(12n+2) a:hover:before {
    content: '\e60f';
}
.asideNav li:nth-child(12n+3) a:hover:before {
    content: '\e61f';
}
.asideNav li:nth-child(12n+4) a:hover:before {
    content: '\e619';
}
.asideNav li:nth-child(12n+5) a:hover:before {
    content: '\e617';
}
.asideNav li:nth-child(12n+6) a:hover:before {
    content: '\e605';
}
.asideNav li:nth-child(12n+7) a:hover:before {
    content: '\e603';
}
.asideNav li:nth-child(12n+8) a:hover:before {
    content: '\e615';
}
.asideNav li:nth-child(12n+9) a:hover:before {
    content: '\e61d';
}
.asideNav li:nth-child(12n+10) a:hover:before {
    content: '\e627';
}
.asideNav li:nth-child(12n+11) a:hover:before {
    content: '\e62b';
}
/*设置侧栏字体图标 结束*/
.asideNav li a {
    display: block;
    /*padding-left: 10px;*/
    width: 100%;
    height: 100%;
    line-height: 32px;
    /*text-align: center;*/
    color: #6b7386;
    font-size: 12px;
}
/*点击左侧子导航列时 更改颜色*/
.asideNav li  .clickChangeBGColor {
    background: #3e424d;
    color: #fff;
}
.asideNav li a:hover {
    color: #fff;
}

/*主要内容 右侧*/
main {
    position: relative;
    left: 15%;
    box-sizing: border-box;
    width: 85%;
    padding: 1px;
    background: #f3f6f8;
    color: #4D4D4D;
}
main>.sectionNav {
    height: fit-content;
    margin: 20px 60px;
    padding-bottom: 2%;
    overflow: hidden;
    background-color: #fff;
}
.sectionNavDisplayNone {
    display: none;
}

.sectionNav h2 {
    margin: 12px 0 0 2%;
    font-size: 18px;
}

.sectionNav .content .detailContent {
    position: relative;
    float: left;
    box-sizing: border-box;
    width: 22%;
    height: 100px;
    border: 1px solid #e6e9eb;
    border-radius: 6px;
    box-shadow: 1px 1px 1px #f0f0f0,
                -1px -1px 1px #f0f0f0;
    margin: 2% 0 0 2%;
    padding: 10px;
    font-size: 12px;
    cursor: pointer;
    color: #3273dc;
    transition: margin-top 0.3s linear,
                color 0.1s linear,
                background 0.2s linear;
}
.sectionNav .content .detailContent:hover {
    margin-top: 1.5%;
    /*color: rgb(250, 255, 255);*/
    background: #30333c;
}
/*清除每行末尾元素变化时，之后的元素会挤上来的效果*/
.sectionNav .content .detailContent:nth-child(4n+1) {
    clear: both;
}
.content .detailContent h3 {
    font-size: 14px;
    word-wrap: break-word;
    /*text-overflow: ellipsis;*/
    /*white-space: nowrap;*/
    /*overflow: hidden;*/
}
.content .detailContent h3:hover {
    color: #ffffff;
}
.content .detailContent h3:before {
    font-family: "iconfont" !important;
    content: "\e61c";
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #1903ff;
    padding-right: 5px;
}
.content .detailContent h3:hover:before {
    font-family: "iconfont" !important;
    content: "\e61c";
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #ffffff;
    padding-right: 5px;
}
.detailContentH3Select {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*width: 100%;*/
    font-size: 15px !important;
    text-align: center;
}
.detailContent .showContent {
    color: #808080;
}
.showContentDisplayNone {
    display: none;
}

/*底部栏 声明*/
#footer {
    position: fixed;
    left: 15%;
    right: 15%;
    bottom: 0;
    width: 50%;
    margin: 20px 60px 0;
    background: #000000;
    color: #3c84ff;
}